/**
 * @Date 2023-02-23 10:13:58
 * @Remark
 */

// react
import React, { Suspense, useEffect } from "react";
// lib
import { Layout, FloatButton } from "antd";
import { Outlet } from "react-router-dom";
// components & widget
import { AppVersion } from "./widget";
import PageAccessChecker from "./PageAccessChecker";
import AdminHeader from "./AdminHeader";
import AdminMenu from "./AdminMenu";
import PwdModal from "./PwdModal";
import InfoModal from "./InfoModal";
import RoutesTagGroup from "./RoutesTagGroup";
import LazyLoading from "./LazyLoading";
// style
import "./style.scss";
// config
import { ROUTE_LOGIN_VIEW } from "project/config";
// script & methods & public
import logUtils from "utils/logUtils";
// store
import { observer } from "mobx-react";
import { state } from "./state";
import { appState, userState } from "state/global";
// controller
import { init } from "./controller";
// interface
// 其它

// const { useToken } = theme;
const { Content } = Layout;
const { Sider } = Layout;

function Main() {
  // props && state
  const isLogin = userState.isLogin();
  const { collapsed } = appState;

  // 根据状态自动重定向
  logUtils.info("访问Main - 是否登录", isLogin);

  useEffect(() => {
    init();
  }, []);

  useEffect(() => {
    if (!isLogin) {
      window.location.replace(`/${ROUTE_LOGIN_VIEW}`); // 清除内存状态和数据
    }
  }, [isLogin]);

  return (
    <Layout>
      <PageAccessChecker />
      <Sider
        className="sider"
        width={200}
        breakpoint="lg"
        collapsible
        trigger={null}
        collapsed={collapsed}
      >
        <AppVersion collapsed={collapsed} />
        <AdminMenu />
      </Sider>
      <Layout className="layout-main">
        <AdminHeader />
        <RoutesTagGroup />
        <Content className="layout-main-content">
          {state.ready && (
            <Suspense fallback={<LazyLoading />}>
              <Outlet />
            </Suspense>
          )}
        </Content>
      </Layout>
      <PwdModal />
      <InfoModal />
      <FloatButton.BackTop visibilityHeight={100} />
    </Layout>
  );
}

export default observer(Main);
